<template>
    <div
        ref="node"
        :style="nodeContainerStyle"
        @mouseup="changeNodeSite"
        @dblclick.stop="setting()"
        :class="nodeContainerClass"
        
    >
        <!-- 添加删除叉号 -->
        <div v-if="showDelete && node.templateCode != 'start_node'" class="closr-wrap" @click.stop="clickNode()">
            <i class="el-icon-error" style="font-size: 16px;color: #222F48;"></i>
        </div>
        <div class="ef-node-left-ico flow-node-drag">
            <i class="iconfont" :class="nodeIcoClass" style="font-size:28px;"></i>
        </div>

        <!-- 节点名称 -->
        <div class="ef-node-text">
            <p class="name">{{node.name}}</p>
            <p class="describe" v-if="node.nodeName && node.nodeName != ''">{{'( '+node.nodeName+' )'}}</p>
        </div>

        <!-- 添加设置按钮 -->
        <div v-if="showSetting && node.templateCode != 'start_node' && node.templateCode !='end_node'"  class="setting-wrap" @click.stop="setting(node)">
            <p>设置</p>
        </div>

        <!-- 该标签可连接的标签列表 -->
        <div class="label-list" v-if="node.showList">
            <div class="label">
                <p>该组件可链接：</p>
                <i class="el-icon-close  delete" @click="node.showList = false"></i>
            </div>
            <div class="item">
                <p v-for="(itm, index) in node.nextLabelList" :key="index" class="list">{{itm.title}}</p>
            </div>
            
        </div>


    </div>
</template>
<script>
    export default {
        components: {
            
        },
        props: {
            node: Object,
            activeElement: Object,
            showDelete: {
                type: Boolean,
                default: true,      // 默认显示删除按钮，查看用户旅程的时候不显示
            },
            showSetting: {
                type: Boolean,
                default: true,      // 默认显示设置按钮，查看用户旅程的时候不显示
            },
            showAdd: {
                type: Boolean,
                default: true,      // 默认显示添加按钮，查看用户旅程的时候不显示
            },
        },
        data() {
            return {
               
            }
        },
        computed: {
            nodeContainerClass() {
                return {
                    'ef-node-container': true,
                    'ef-node-active': this.activeElement.type == 'node' ? this.activeElement.nodeId === this.node.id : false
                }
            },
            // 节点容器样式
            nodeContainerStyle() {
                return {
                    top: this.node.top,
                    left: this.node.left
                }
            },
            nodeIcoClass() {
                var nodeIcoClass = {}
                nodeIcoClass[this.node.ico] = true;
                // 添加该class可以推拽连线出来
                nodeIcoClass['flow-node-drag'] = true
                return nodeIcoClass
            }
        },
        methods: {
            // handleClose
            handleClose() {
                this.showSettings = false
            },

            // 点击节点
            clickNode() {
                this.$emit('clickNode', this.node.id)
            },
            // 鼠标移动后抬起
            changeNodeSite() {
                // 避免抖动
                if (this.node.left == this.$refs.node.style.left && this.node.top == this.$refs.node.style.top) {
                    return;
                }
                this.$emit('changeNodeSite', {
                    nodeId: this.node.id,
                    left: this.$refs.node.style.left,
                    top: this.$refs.node.style.top,
                })
            },

            // 点击设置按钮触发的方法
            setting() {
                if(this.node.nodeTemplateCode == 'start_node' || this.node.nodeTemplateCode == 'end_node') {
                    return;
                }
                this.$emit('setting', this.node);
            },
            
        },
    }
</script>


<style lang='scss' scoped>
.label-list {
    font-size: 12px;
    position: absolute;
    right: -180px;
    top:-6px;
    box-shadow:0px 0px 4px 0px rgba(0,0,0,0.1);
    width: 158px;
    height: auto;
    background-color: #fff;
    z-index: 999;
    text-align: left;
    cursor: default;
    .label{
        padding:0 10px;
        text-align: left;
        background:#E5EEFF ;
        height: 28px;
        line-height: 28px;
        color: #222F48;
        position: relative;
        display: flex;
        align-items: center; 
        justify-content: space-between;       
        .delete {
            font-size: 20px;
            cursor: pointer;
            font-size: 10px;
        }
    }
    .item{
        padding: 10px;
        p{
            margin-bottom: 10px;
            color: #333;
        }
    }
}
//设置
.setting-wrap {
    cursor: pointer !important;
    position: absolute;
    top:-4px;
    right: 35px;
    p{
        min-width: 36px;
        padding: 1px 0;
        position: absolute;
        background: #222F48;
        color: #fff;
        font-size: 10px;
        box-shadow:0px 0px 4px 0px rgba(0,0,0,0.15);
        border-radius:0px 4px 0px 4px;
        &::before{
            content: "";
            position: absolute;
            top: -4px;
            left: -4px;
            border-width: 4px 0 4px 4px;
            border-style: solid;
            border-color: transparent transparent #222F48;
        }
    }
} //左边图
    .flow-node-drag{
        width: 50px;
        background: #222F48;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    //文字
    .ef-node-text{  
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        .name{
            font-size: 14px;
            color: #666;
            line-height: 1;
        }
    }
</style>
